<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix = "fn" uri = "http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="<%=basePath %>/bootstrap/js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css" />
	<style type="text/css">
		body{
			background-image:url("<%=basePath%>/bootstrap/img/5.jpg");
			 background-attachment :local; 
			 background-size: cover;
		}
		.container{
			margin-left:50px;
		}
		.container .nav{
			margin-left:120px;
		}
		
		.container-fluid{
			margin-top:70px;
			margin-left:-20px;
		}
		#navleft{
			font-size:18px;
		}
		#aleft{
			color:black;
		}
		#aleft:hover{
			color:blue;
		}
		.span3{
			background-image:url("<%=basePath%>/bootstrap/img/5.jpg");
		}
		.pagerhader,.reqiredtable {
			background-image:url("<%=basePath%>/bootstrap/img/5.jpg");
			border-bottom: 1px solid #DADEE5;
			font-size: 18px;
			padding: 15px 30px;
			position: relative;
		}
		.othertable{
			border-bottom: 1px solid #DADEE5;
			font-size: 18px;
			padding: 15px 30px;
			position: relative;
		}
		.pagecontent .time {
			width: 50px;
		}
		td {
			padding: 0.8em;
		}
		
		.event{
			background-color:blue;
		}
		.winchance,.success{
			background-color:green;
		}
		.fail,.losttask{
			background-color:red;
		}
		.chance,.followchance{
			background-color:black;
		}
		
		.today{
			background-color: #FFCC00;
		}
		.box {
			background-color: #FFFFFF;
			margin-bottom: 10px;
			padding-bottom: 10px;
			width:250px;
		}
		.task1{
			margin-left:20px;
			font-size:16px;
		}
		strong, th, thead td, h1, h2, h3, h4, h5, h6 {
			font-weight: bold;
		}
		#anpai{
			width:250px;
			height:40px;
			background-color: #F0F5F8;
		}
		#adduser{
			margin:10px;
		}
		.div1{
			font-size:5px;
		}
		#myform{
			margin-left:15px;
		}
		h3{
		
			margin-left:10px;
			}
			.div6{
				margin-left:20px;
			}
			.task{
				margin-top:10px;
			}
			.task1{
				margin-left:10px;
			}
	</style>
</head>
<body>
	<!--导航-->
	   	   <div id="navbar-example" class="navbar navbar-fixed-top">
            <div class="navbar-inner">
              <div class="container" style="width: auto; height:10px">
                <a class="brand" href="#">CRM</a>
                <ul class="nav">
					<li class="">
						 <form id="searchForm" class="navbar-search pull-left" action="http://www.google.com.hk/search" method="get">
								<input type="text" id="search" class="search-query span5" name="q" autocomplete="off" placeholder="Google Search"/>
								<script>
									$(document).ready(function(){
										$("#search").keydown(function(){
											if(event.keyCode == 13) {
												$("searchForm").submit();
											}

										});

									});
								</script>
							</form>
					  </li>
					  <li class="">
						<a href="">用户名：${sessionScope.user.username }</a>
					  </li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
							账号&设置
							<b class="caret"></b>
						</a>
                    <ul class="dropdown-menu">
						  <li><a href="users.action">我的信息</a></li>
						  <li><a href="groups.action">小组成员</a></li>
						  <script type="text/javascript">
							$(document).ready(function(){
								$(".dropdown-toggle").dropdown();
							});
						 </script>
						</ul>
					</li>
					  <li class="">
						<a href="index.action">安全退出</a>
					  </li>
                </ul>
              </div>
            </div>
          </div>
		  <script type="text/javascript">
			$(document).ready(function(){
				$(".dropdown-toggle").dropdown();
			});
		  </script>

		  <!--左遍的内容-->
		<div class="container-fluid">
		  <div class="row-fluid">
			<div class="span3" style="background-color: #F0F5F8;border: 1px solid #DADEE5;width:170px;height:240px;padding-top:20px;margin-left:40px;">
				<div id="left">
					<ul class="nav nav-list" id="navleft">
					  <li>
						<a href="findAllMessage.action" id="aleft">
						   <img src="<%=basePath%>/bootstrap/img/22.png"/>
							最新动态
						</a>
					  </li>
					  <li>
						<a href="contacts.action" id="aleft">
						 <img src="<%=basePath%>/bootstrap/img/18.png"/>
							联系人
						</a>
					  </li>
					  <li>
						<a href="task.action" id="aleft">
						  <img src="<%=basePath%>/bootstrap/img/20.png"/>
							日程安排
						</a>
					  </li>
					  <li>
						<a href="deal.action" id="aleft">
						 <img src="<%=basePath%>/bootstrap/img/19.png"/>
							业务机会
						</a>
					  </li>
					  <li class="search">
						<a href="search.action" id="aleft">
							<img src="<%=basePath%>/bootstrap/img/21.png"/>
							搜索
						</a>
						</li>
					</ul>
				</div>
			</div>
			<!--中心的内容-->
			<div class="span6" style="border:1px solid #D7D7D7;background-color:white;width:550px">
				<div class="pagebody">
					<div class="pagerhader">

								<h1 style="margin-top:0px;font-size:18px;margin-bottom:-15px">
									<img src="<%=basePath %>/bootstrap/img/4.png"/>
								<c:choose>
									<c:when test="${contacts.name !=null }">
											${contacts.name }：
									</c:when>
									<c:when test="${contacts.companyname!=null&&contacts.name==null}">
										${contacts.companyname }:
									</c:when>

						
								
									</c:choose>
						
								${deal.title }
								</h1><!-- 合作者 ：交易名字 -->
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥${deal.money}
				
				<br/>
			
				
			
				<div style="margin-top:5px">
						<select name="deal.state" id="select1" >
							
								<option value="${deal.id }" 
									<c:if test="${deal.state== '成功'}">selected</c:if>
								>成功</option>
								
								<option value="${deal.id }" 
									<c:if test="${deal.state== '跟踪'}">selected</c:if>
								>跟踪</option>
								<option value="${deal.id }" 
									<c:if test="${deal.state== '失败'}">selected</c:if>
								>失败</option>
						</select> 
						</div>  
					</div>
					
					
					<div class="pagecontent">
						<div class="div6">
						<h3>添加笔记</h3>
						
						<form >
						 <input type="hidden" name="uid" value="${sessionScope.user.id }" id="uid" />
							<input type="hidden" name="did" value="${deal.id }" id="did"/>
							<textarea rows="5" style = "width:460px;font-size:18px" id ="content" name=""></textarea><br/>
							<input class="btn btn-primary" type="button" id="btn" value="发表"></input>
						
						</form>
						</div>
						<!-- 显示添加的笔记 -->
						<hr/>
						<h3>显示笔记</h3>
						<div>
						
							<div id ="result"></div>
							 <c:forEach items ="${dealnoteSet }" var ="dealnote">
								 <blockquote>
	    							<p id="input01">${dealnote.content }</p><!-- 内容 --><small id="input02">发表于${dealnote.createtime}</small>
	    							<a id="del" href="dealnotedel.action?id=${dealnote.id}">删除</a> 
	    							<a id="update" href="javascript:;" rel="${dealnote.id}">编辑</a> 
	    							<div id="add"></div>
	    							<a href="javascript:;" class="btn btn-info" id="edit" rel="${dealnote.id}" style="display:none">save</a>
	    						 </blockquote>
    					 	</c:forEach>
    					
    				
						</div>
					</div>
				</div>
			</div>
			<div class="span3" style="background-color: #F0F5F8;border: 1px solid #DADEE5;width:170px;height:240px;padding-top:20px;margin-left:25px;">
				<div style="margin-left:18px;">
				<a class="btn btn-info btn-large" href="taskadd.action?did=${deal.id}">添加任务</a><br/>
				</div> 
					<c:choose>
						<c:when test="${fn:length(taskSet)==0}">
							<div></div>
						</c:when>
						<c:otherwise>
							<div class="task">
							<h3>今日日程</h3>
							
							<div class="task1">
							<c:forEach items="${taskSet}" var="task">
								<c:if test="${task.complete==false }">
								<a class="btn  btn-mini btn-info" href="dealtaskchange.action?id=${task.id}&did=${deal.id}">
											<i class="icon-ok"></i>
											
										</a>
									${task.title}
									
								</c:if>
							</c:forEach>
							</div>
							
							
							
							</div>
						</c:otherwise>
					</c:choose>

				
				
			</div>
		  </div>
		</div>
		
		<script type="text/javascript">
		
			
			
			
			var xmlHttp;
			function createXMLHttp(){
				if(window.ActiveXObject){
					xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");
				}else{
					xmlHttp = new XMLHttpRequest();
				}
			}
			
			//添加
			document.getElementById("btn").onclick=function(){
				createXMLHttp();
				var content = document.getElementById("content").value;
				document.getElementById("content").value = "";
				var uid = document.getElementById("uid").value;
				var did = document.getElementById("did").value;
				if(content.trim()!=""){
					xmlHttp.open("post", "dealnotesave.action", true);
					xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					xmlHttp.onreadystatechange=callback;
					xmlHttp.send("content="+content+"&did="+did+"&uid="+uid);
					
				}
			};
			
			function callback(){
				if(xmlHttp.readyState==4){
					if(xmlHttp.status==200){
					
						var obj =JSON.parse(xmlHttp.responseText);
						 var block = document.createElement("blockquote");
						 var small = document.createElement("small");
						 var p = document.createElement("p");
						 var a1 = document.createElement("a");
						 var a2 = document.createElement("a");
						
						a1.setAttribute("href", "dealnotedel.action?id="+obj.id);
						a2.setAttribute("href", "javascript:;");
						a2.setAttribute("ref", obj.id);
						 
						 var content = document.createTextNode(obj.content);
						 var smallContent = document.createTextNode("发布于"+obj.createtime);
						 var avalue1 = document.createTextNode("删除");
						 var avalue2 = document.createTextNode("编辑");
						 
						 p.appendChild(content);
						 small.appendChild(smallContent);
						 a1.appendChild(avalue1);
						 a2.appendChild(avalue2);
						 
						block.appendChild(p);
						block.appendChild(small);
						block.appendChild(a1);
						block.appendChild(a2);
						
						document.getElementById("result").appendChild(block);
						
						 
					}
				}
			}
			//修改
			
			$(document).ready(function(){
				$("#update").click(function(){
					var dnoteid = $("#update").attr("rel");
					$.post("dealnoteupdate.action",{id:dnoteid},function(json){
						$(json).each(function(){
							$("#add").append($("<textarea id='tcontent' cols='3'>"+this.content+"</textarea><br/>"));
						});
						$("#edit").css("display","");
					});
				});
				$("#edit").click(function(){
					
					var content =$("#tcontent").val();
					var dnoteid = $("#edit").attr("rel");
					
					$.post("dealnoteedit.action",{id:dnoteid,content:content},function(result){
						$(result).each(function(){
							
							$("#input01").text(this.content);
							$("#input02").text(this.createtime);
							$("#add").text("");
							$("#edit").css("display","none");
						});
					});
				});
					
				$("#select1").change(function(){
					var did =$("#select1").val();
					var state =$("#select1").find("option:selected").text();
					$.post("dealstatechange.action",{did:did,state:state});
				
				});
				
			
			});
			
				
					
			
		</script>
				
</body>
</html>
